<template>
  <div class="page-charge">
    <div @click="GoSweep" class="btn-charge charge-sweep">扫码充电</div>
    <div @click="GoCode" class="btn-charge charge-code">手动输入</div>

    <p class="charge-txt">请规范用电，注意用电安全</p>
  </div>
</template>


<style scoped>
  .page-charge {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 100px;
  }

  .btn-charge {
    width: 600px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-size: 28px;
    margin: 0 auto 60px;
    border-radius: 45px;
  }

  .charge-sweep {
    background: #00ac64;
    color: #fff;
    -webkit-box-shadow: 0 0 8px 0 #00ac64;
  }

  .charge-code {
    border: 1px solid #ccc;
    -webkit-box-shadow: 0 0 8px 0 #ccc;
  }
  .charge-txt{
    margin-top: 600px;
    text-align: center;
    font-size: 28px;
    color: #999;
  }
</style>


<script>
  export default {
    name: 'Charge',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted(){
    },
    methods: {
      GoSweep(){
        
        wx.ready(function() {
          wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function(res) {
              var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              alert(result);
            }
          });          
        });

      },
      GoCode(){
        this.$router.push("chargeCode");
      }
    }
  }
</script>
